<template>
  <div>
     <!-- v-show 和 v-if 功能: 控制盒子的显示隐藏 -->

     <!-- v-show的原理 -->
     <!-- 原理: 实质是在控制元素的 css 样式, `display: none;` -->
     <!-- <div v-show="flag">我是盒子</div> -->

     <!-- v-if的原理
     原理: 实质是在动态的创建 或者 删除元素节点 -->
     <!-- <div v-if="flag">我是盒子</div> -->

    <!-- <img src="./assets/4137bc83-03b9-40f9-94d1-c45e60f631df.png" alt="" v-show="flag">
    <button @click="toggle">点击以后显示和隐藏</button> -->

    <!-- <div v-show="age >= 18 ? true : false">血腥暴力场面</div> -->

    <!-- 注意点：v-if，v-else-if，v-else一定要在同一级 -->
    <div v-if="age >= 60">60岁以上，唱跳rap</div>
    <div v-else-if="age >= 30">30岁以上，抽烟喝酒烫头</div>
    <div v-else-if="age >= 20">20岁以上，煮茶焚香下棋</div>
    <div v-else>20岁以下，练习广场舞</div>

   </div>
</template>
 
<script>
export default {

  data() {
    return {
        flag:true,
        age:30
    };
  },

  methods: {
    //控制图片的显示和隐藏
    toggle() {
        this.flag = !this.flag
    }
  }
};
</script>

<style scoped>
     
</style>